<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../style/fjol_style.css" />
	</head>

	<body>
		<!--下拉刷新容器-->
		
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view" id="recommendList">
					
				</ul>
			</div>
		</div> 
		<script src="../js/mui.min.js"></script>
		<script src="../js/md5.js"></script>
		<script src="../js/common.util.js"></script>
		<script src="../js/network.js"></script>
		<script src="../js/mui.pullToRefresh.js"></script>
		<script src="../js/mui.pullToRefresh.material.js"></script>
		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/jquery.tmpl.min.js"></script>
		<script id="reservationTmpl" type="text/x-jquery-tmpl">
			<li class="mui-table-view-cell mui-media">
            	<div class="mui-clearfix">
            		{{if area==null}}
            		<span class="mui-pull-left">(null)${buildingName} ${title}</span>
            		{{else}}
            		<span class="mui-pull-left">${area} ${buildingName} ${title}</span>
            		{{/if}}
            		{{if houseReserveStateName=='未处理'}}
            		<button type="button" class="mui-btn mui-btn-grey mui-btn-outlined mui-pull-right p10 color9">取消预约</button>
            		{{/if}}
            	</div>
                <div class="mui-media-body mt10" style="line-height: 1.6em;">
                    
                    <div class="mui-ellipsis mui-pull-left">
                    	<p class="mui-inline mr10">预约状态</p><span>${houseReserveStateName}</span><br />
                    	<p class="mui-inline mr10">预约时间</p><span>${$item.getReserveDate()}</span><br />
                    	{{if salemanRealname==null}}
                    	<p class="mui-inline mr10">经纪人</p><span>无名</span>
                    	{{else}}
                    	<p class="mui-inline mr10">经纪人</p><span>${salemanRealname}</span>
                    	{{/if}}
                    </div>
                    <span class=" mui-pull-right">
                    	{{if houseReserveStateName=='已处理'}}
                        <img class="tophone-img" src="../images/tophone.png">
                        {{/if}}
                    </span>
                </div>
            </li>
		</script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			
				var pageValue =1;
		/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				$('.mui-pull').hide();
				setTimeout(function(){
					dataLoad(1,10,true);
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					mui('#pullrefresh').pullRefresh().enablePullupToRefresh();
					return pageValue = 1;
				},1000);
				
			}	
			/**
			 * 上拉加载具体业务实现
			 */
			
			function pullupRefresh() {
				$('.mui-pull').show();
				setTimeout(function() {
				var userInfo = common.myStorage.getItem('userInfo');
				pageValue++;
				dataLoad(pageValue,10,false);
				},1000);
			}
			mui.plusReady(function(){
				
			dataLoad(1,10,false);
				
				
			});
				function dataLoad(pageValue,rowsNumber,isTrue){
					var userInfo = common.myStorage.getItem('userInfo');
//					console.log(userInfo);
					var param = [{
						key:'clientId',
						value:userInfo.clientId
					},{
						key:'page',
						value:pageValue
					},{
						key:'rows',
						value:10
					}];
					
					fjNetwork.get('fjzx/client/house-reserve-list.json',param,function(data){
//					console.log(JSON.stringify(data));
					var rows = data.rows;
					
					if(isTrue){
						$('#recommendList').html('');
					}
					count = rows.length;
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((rows.length==0)); //参数为true代表没有更多数据了。
					$('#reservationTmpl').tmpl(rows,{
						getReserveDate:function(){
							var reserveDate = this.data.reserveDate;
							var reserveDateTime = new Date(reserveDate).toLocaleString();
							return reserveDateTime;
						}
					}).appendTo('#recommendList');

				
				},function(msg){
					mui.toast(msg);
				});
				}
			
			Date.prototype.toLocaleString = function() {
		        return this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate() + " " + this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds();
		    };
			
		</script>
	</body>

</html>